<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>范闲商城-订单详情</title>
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/reset.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/main.css}">
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
	<script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" th:href="@{/static/step/layui/css/layui.css}" />
	<link rel="stylesheet" th:href="@{/static/step/layui/mods/extend/step/step.css}" />
	<style>
		/* 移除所有单元格的边框 */
		.table td {
			border: none;
		}

		/* 为表格添加外框线 */
		.table {
			border-collapse: collapse; /* 确保边框不会重叠 */
			border: 1px solid 	#C0C0C0;
		}

		/* 为"订单信息"下面的单元格添加底部边框 */
		.table tr:first-child td {
			border-bottom: 1px solid 	#C0C0C0;
		}

		/* 为"订单状态"单元格添加左侧边框 */
		.table td[rowspan] {
			border-left: 1px solid 	#C0C0C0;
		}

		.table td {
			border: none; /* 移除单元格边框 */
		}
		.avatar-img {
			width: 20px; /* 设置头像图片的宽度 */
			height: 20px; /* 设置头像图片的高度，可以根据需要调整 */
			border-radius: 50%; /* 使图片呈现圆形 */
			margin-right: 10px; /* 设置头像图片与用户名之间的间距，可以根据需要调整 */
		}
	</style>
</head>
<body>
	<div th:replace="header::top"></div>

	<div class="search_bar clearfix">
		<a href="/" class="logo fl"><img src="/static/pic/fanxian-mall.png" width="150px" height="60px"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;订单详情</div>
		<div class="search_con fr">
			<input type="text" id="searchInput" class="input_text fl" placeholder="搜索商品">
			<input type="button" id="searchButton" class="input_btn fr" value="搜索">
		</div>		
	</div>

	<div class="common_list_con clearfix">
		<div style="height: 100px; margin-left: 200px; margin-right: auto; margin-top: 50px;" id="statusStep"></div>
	</div>

	<div class="common_list_con clearfix">

		<table class="layui-table table" border="1" style="width: 95%; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px;">
			<colgroup>
				<col width="10%">
				<col width="40%">
				<col width="50%">
			</colgroup>

			<tbody>
			<tr>
				<td colspan="2">订单信息</td>
				<td rowspan="7" style="text-align: center">
					<image id="statusImage" style="width: 60px; height: 60px;"></image>订单状态:<em id="status"></em>
					<div  id="orderBtnStatus">
<!--						<br><br>-->
<!--						您可以  <button type="button" class="layui-btn layui-btn-sm layui-bg-blue">付款</button>-->
<!--						<a href="javascript:void(0)"><em id="CancelOrder">取消订单</em></a>-->
					</div>
				</td>
			</tr>
			<tr>
				<td>订单编号：</td>
				<td><em id="orderNo">2181249015114520859</em></td>
			</tr>
			<tr>
				<td>收货地址：</td>
				<td><em id="receiverName"></em> <em id="receiverMobile">17616262669</em></td>
			</tr>
			<tr>
				<td><em id="updateOrder"></em></td>
				<td><em id="receiverProvince">山东省</em> <em id="receiverCity">青岛市</em> <em id="receiverArea">城阳区</em></td>
			</tr>
			<tr>
				<td></td>
				<td><em id="receiverAddress">城阳街道 青岛农业大学西苑综合办公楼中享教育科技基地中享思途</em></td>
			</tr>
			<tr>
				<td></td>
				<td><em id="receiverZip">000000</em></td>
			</tr>
			<tr>
				<td>下单时间：</td>
				<td><em id="createTime">2181249015114520859</em></td>
			</tr>
			</tbody>
		</table>

	</div>

	
	<div class="common_list_con clearfix">
		<table class="layui-table" lay-skin="line" style="width: 95%; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px;">
			<colgroup>
				<col width="5%">
				<col width="25%">
				<col width="25%">
				<col width="15%">
				<col width="15%">
				<col width="15%">
				<col>
			</colgroup>
			<thead>
			<tr>
				<th></th>
				<th>商品图片</th>
				<th>商品名称</th>
				<th>商品价格</th>
				<th>数量</th>
				<th>小计</th>
			</tr>
			</thead>
			<tbody id="LAY_OrderCartList">
			<tr>
				<th>1</th>
				<th><img src="/static/images/goods/goods003.jpg"></th>
				<th>大兴大棚草莓</th>
				<th>16.80元</th>
				<th>1</th>
				<th>16.80元</th>
			</tr>
			</tbody>
		</table>
	</div>

	<h3 class="common_title">总金额结算</h3>

	<div class="common_list_con clearfix">
		<div class="settle_con">
			<div class="total_goods_count">共<em>2</em>件商品<br>总金额<b id="totalCost">42.60</b>元</div>
			<div class="transit">运费：<b id="postage">10</b>元</div>
			<div class="transit">优惠券抵扣：<b id="discount">-100</b>元</div>
			<div class="total_pay">实付款：<b id="payment">52.60</b>元</div>
		</div>
	</div>

	<div class="order_submit clearfix">
		<a href="/page/user/order">返回订单列表</a>
	</div>	

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2024 北京鑫鑫科技有限公司 All Rights Reserved</p>
		<p>电话：010-8888888    京ICP备88888888号</p>
	</div>

	<script type="text/javascript">
		$('#searchButton').click(function() {
			var searchText = $('#searchInput').val(); // 获取搜索框中的值
			var searchUrl = '/page/list?search=' + encodeURIComponent(searchText); // 构建带有搜索关键字的URL
			window.location.href = searchUrl; // 跳转到另一个页面
		});
		var queryString = window.location.search;
		var urlParams = new URLSearchParams(queryString);
		var orderNo = urlParams.get("orderNo");
		$.post(
				'/shipping/ShippingByOrderNo',
				{'orderNo': orderNo},
				function (result) {
					if (result.code == 0) {
						$('#receiverName').text(result.data.receiverName);
						$('#receiverMobile').text(result.data.receiverMobile);
						$('#receiverProvince').text(result.data.receiverProvince);
						if (result.data.receiverCity === '市辖区'|| result.data.receiverCity === '县') {
							$('#receiverCity').text('');
						} else {
							$('#receiverCity').text(result.data.receiverCity);
						}
						$('#receiverArea').text(result.data.receiverArea);
						$('#receiverAddress').text(result.data.receiverAddress);
						$('#receiverZip').text(result.data.receiverZip);
						$('#orderNo').text(orderNo);
					}
				},
				'json'
		);
		$.post(
				'/order/orderItemByOrderNo',
				{'orderNo': orderNo},
				function (result) {
					if (result.code == 0) {
						var html = '';
						var count = 1; // 初始化计数器
						var totalQuantity = 0; // 初始化商品总数量
						var totalPrice = 0; // 初始化总金额
						$('#LAY_OrderCartList').empty();
						$(result.data).each(function () {
							html += '<tr>'
							html += '	<th>'+count+'</th>'
							html += '	<th><img src="'+this.productImage+'"></th>'
							html += '	<th>'+this.productName+'</th>'
							html += '	<th>'+this.currentUnitPrice+'元</th>'
							html += '	<th>'+this.quantity+'</th>'
							html += '	<th>'+this.currentUnitPrice+'元</th>'
							html += '</tr>'
							count++;
							totalQuantity += this.quantity; // 累加商品数量
							totalPrice += this.quantity * this.currentUnitPrice; // 累加总金额
						});
						$('#LAY_OrderCartList').append(html);
						$('.total_goods_count em').text(totalQuantity); // 更新商品总数量
						$('#totalCost').text(totalPrice); // 更新商品总价格
					}
				},
				'json'
		);


		layui.config({
			base: '/static/step/layui/mods/extend/step/'
		}).use('step',function(){
			var step = layui.step

			,data0 = {
				steps: [{"title" : "下单"},
					{"title" : "付款"},
					{"title" : "发货"},
					{"title" : "收货"},
					{"title" : "评价"}]
				,current: 0
			}
			data1 = {
				steps: [{"title" : "下单"},
					{"title" : "付款"},
					{"title" : "发货"},
					{"title" : "收货"},
					{"title" : "评价"}]
				,current: 1
			}
			data2 = {
				steps: [{"title" : "下单"},
					{"title" : "付款"},
					{"title" : "发货"},
					{"title" : "收货"},
					{"title" : "评价"}]
				,current: 2
			}
			data3 = {
				steps: [{"title" : "下单"},
					{"title" : "付款"},
					{"title" : "发货"},
					{"title" : "收货"},
					{"title" : "评价"}]
				,current: 3
			}
			data4 = {
				steps: [{"title" : "下单"},
					{"title" : "付款"},
					{"title" : "发货"},
					{"title" : "收货"},
					{"title" : "评价"}]
				,current: 4
			}
			data5 = {
				steps: [{"title" : "下单"},
					{"title" : "付款"},
					{"title" : "发货"},
					{"title" : "收货"},
					{"title" : "评价"}]
				,current: 5
			}


			$.post(
					'/order/orderByOrderNo',
					{'orderNo': orderNo},
					function (result) {
						if (result.code == 0) {
							if (result.data.status === 0) {
								$('#statusImage').attr('src', '/pic/jinggao.png');
								$('#status').text('订单已取消');
								$('#orderBtnStatus').empty();
								$('#statusStep').append('<div id="demo0"></div>');
								step.ready({
									elem: '#demo0',
									data: data0,
									width: '150px',
									color: {
										success:'green',
										error:'#FF0000'
									}
								})
							} else if (result.data.status === 10) {
								$('#statusImage').attr('src', '/pic/jinggao.png');
								$('#status').text('已下单，等待付款');
								var html = '';
								$('#orderBtnStatus').empty(); // 清空现有内容
								$(result.data).each(function () {
									html += '<br>';
									html += '您可以  <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" id="pay">去付款</button> 或 '; // 注意 className 改为 class
									html += '<a href="javascript:void(0)"><em style="font-size: 10px" id="CancelOrder">取消订单</em></a>';
								});
								$('#orderBtnStatus').append(html);
								$('#updateOrder').append('<button type="button" class="layui-btn layui-bg-red layui-btn-xs">修改地址</button>');
								$('#statusStep').append('<div id="demo1"></div>');
								step.ready({
									elem: '#demo1',
									data: data1,
									width: '150px',
									color: {
										success:'green',
										error:'#FF0000'
									}
								})

							} else if (result.data.status === 20) {
								$('#statusImage').attr('src', '/pic/wenhao.png');
								$('#status').text('已付款，待发货');
								$('#updateOrder').append('<button type="button" class="layui-btn layui-bg-red layui-btn-xs">修改地址</button>');
								$('#orderBtnStatus').empty();
								$('#statusStep').append('<div id="demo2"></div>');
								step.ready({
									elem: '#demo2',
									data: data2,
									width: '150px',
									color: {
										success:'green',
										error:'#FF0000'
									}
								})
							} else if (result.data.status === 40) {
								$('#statusImage').attr('src', '/pic/wenhao.png');
								$('#status').text('已发货，待收货');
								$('#updateOrder').append('<button type="button" class="layui-btn layui-bg-red layui-btn-xs">修改地址</button>');
								var html = '';
								$('#orderBtnStatus').empty(); // 清空现有内容
								$(result.data).each(function () {
									html += '<br>';
									html += '您可以  <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" id="ConfirmReceipt">确认收货</button>或 '; // 注意 className 改为 class
									html += '<a href="javascript:void(0)"><button type="button" class="layui-btn layui-btn-sm layui-bg-yellow" id="logistics">查看物流</button></a>';
								});
								$('#orderBtnStatus').append(html);
								$('#statusStep').append('<div id="demo3"></div>');
								step.ready({
									elem: '#demo3',
									data: data3,
									width: '150px',
									color: {
										success:'green',
										error:'#FF0000'
									}
								})
							} else if (result.data.status === 50) {
								$('#statusImage').attr('src', '/pic/wancheng.png');
								$('#status').text('已收货');
								var html = '';
								$('#orderBtnStatus').empty(); // 清空现有内容
								$(result.data).each(function () {
									html += '<br>';
									html += '您可以  <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" id="evaluate">去评价</button> ';
								});
								$('#orderBtnStatus').append(html);
								$('#statusStep').append('<div id="demo4"></div>');
								step.ready({
									elem: '#demo4',
									data: data4,
									width: '150px',
									color: {
										success:'green',
										error:'#FF0000'
									}
								})
							} else if (result.data.status === 60) {
								$('#statusImage').attr('src', '/pic/wancheng.png');
								$('#status').text('已评价');
								$('#orderBtnStatus').empty();
								$('#statusStep').append('<div id="demo5"></div>');
								step.ready({
									elem: '#demo5',
									data: data5,
									width: '150px',
									color: {
										success:'green',
										error:'#FF0000'
									}
								})
							}
							$('#payment').text(result.data.payment);
							$('#postage').text(result.data.postage);
							$('#discount').text(result.data.discount);
							$('#createTime').text(result.data.createTime);
							$('#CancelOrder').click(function() {
								layer.confirm(
										'您确定要取消订单吗？',
										{icon : 3},
										function (index) {
											$.post(
													'/order/cancelOrder',
													{'orderNo': orderNo},
													function (result) {
														if (result.code == 0) {
															mylayer.okMsg(result.msg);
															setInterval(function() {
																window.location.reload();
															}, 2000)
														}
													},
													'json'
											);
										}
								)

							});
							$('#pay').click(function() {
								location.href="/page/pay?orderNo="+orderNo;
							});
							$('#evaluate').click(function() {
								location.href="/page/order/evaluate?orderNo="+orderNo;
							});
							$('#logistics').click(function() {
								location.href = '/page/order/logistics?orderNo='+orderNo;

							});
							$('#ConfirmReceipt').click(function() {

								layer.confirm(
										'您确定已经收到货物了吗？',
										{icon : 3},
										function (index) {
											$.post(
													'/order/confirmReceipt',
													{'orderNo': orderNo},
													function (result) {
														if (result.code == 0) {
															mylayer.okMsg(result.msg);
															setInterval(function() {
																window.location.reload();
															}, 2000)
														}
													},
													'json'
											);
										}
								)
							});
							$('#updateOrder').click(function() {

								layer.open({
									type: 2,
									title: '修改收货地址',
									area: ['50%', '75%'],// 宽高
									content: '/page/order/update?orderNo='+orderNo,
								});

							});
						}
					},
					'json'
			);








			// step.ready({
			// 	elem: '#demo5',
			// 	data: data5,
			// 	width: '150px',
			// 	color: {
			// 		success:'green',
			// 		error:'#FF0000'
			// 	}
			// })
		});
		function logout() {
			layer.confirm(
					'您确认要退出么',
					{icon:3},
					function() {
						$.post(
								'/user/logout',
								function (result) {
									if (result.code == 0) {
										mylayer.okMsg(result.msg);
										setTimeout(function() {
											window.location.reload();
										}, 800);
									}
								},
								'json'
						);
						// location.href = '/admin?method=logout'
					}
			);
		}
	</script>
</body>
</html>